import React, { FC } from "react";
import classnames from "classnames";
import styles from "./List1.module.scss";

type QuestionItemProps = {
  id: string;
  title: string;
  isPublished: boolean;
  deleteQuestion?: (id: string) => void;
  editQuestion?: (id: string) => void;
  publishQuestion?: (id: string) => void;
  //使用问好的目的是代表这个参数是可选的
};
//这里是父子组件传递相关的参数的写法
const QuestionCard: FC<QuestionItemProps> = (ques) => {
  const { id, title, isPublished, deleteQuestion, editQuestion,publishQuestion } = ques;

  function edit(id: string) {

    editQuestion && editQuestion(id);
  }
  function del(id: string) {
    deleteQuestion && deleteQuestion(id);
    //   console.log(id +"delete")
  }

  function pushed(id: string) {
      publishQuestion&&publishQuestion(id);
  }

  //  const classN = classnames(styles.container,{[styles.published] :isPublished});
    const  listIntemClass = styles["container"];
    const pub = styles.published;
    const  itemClassname = classnames(
        {
            [listIntemClass]: true,
            [pub]:isPublished
        }
    )

  return (
    <div key={id} className={itemClassname}>
      <strong>{title}</strong>
      &nbsp;
      {isPublished ? (
        <span className={styles.publishSpan}>发布</span>
      ) : (
        <span style={{ color: "blue" }}>未发布</span>
      )}
      &nbsp; &nbsp; &nbsp;
      <button
        onClick={() => {
          pushed(id);
        }}
        style={{ color: "black" }}
      >
        发布问卷
      </button>
      &nbsp;&nbsp;&nbsp;
      <button
        onClick={() => {
          del(id);
        }}
        style={{ color: "darkred" }}
      >
        删除
      </button>
        <button
            onClick={() => {
                edit(id);
            }}
            style={{ color: "darkred" }}
        >
            编辑问卷
        </button>


    </div>
  );
};

export default QuestionCard;
